import React, { Suspense, lazy } from 'react';
import Media from 'react-media';
import { Redirect, Route, Switch } from 'react-router-dom';
const About = lazy(() => import('../pages/About'));
const Calculator = lazy(() => import('../pages/Calculator'));

const Invoices = () => (
  <div>
    <Media query="(max-width: 299px)">
      {screenIsSmall => (screenIsSmall ? (
      // small screen has no redirect
        <Switch>
          <Route exact path="/invoices/dashboard" component={About} />
          <Route path="/invoices/:id" component={Calculator} />
        </Switch>
      ) : (
      // large screen does!
        <Switch>
          <Route exact path="/invoices/dashboard" component={About} />
          <Route path="/invoices/:id" component={Calculator} />
          <Redirect from="/invoices" to="/invoices/dashboard" />
        </Switch>
      ))
      }
    </Media>
  </div>
);

export default Invoices;
